<template>
	<view class="select_outer" :style="{transform:  status ? 'translateY(0)' : 'translateY(100%)'}">
		<view class="t">
			<text @click="cancel"></text>
			<text @click="pri_affrim">确认</text>
		</view>
		<view class="m">
			<view class="content">
				<view class="row">
					<view class="nominal">
						昵称
					</view>
					<view class="input">
						<input placeholder="请输入昵称" type="text" v-model="uname" />
					</view>
				</view>
				<view class="row">
					<view class="nominal">
						性别
					</view>
					<view class="input">
						<radio-group>
						    <label>
						        <radio :value="'1'" :checked="gender == 1"/>
								<text>男</text>
						        <radio :value="'0'" :checked="gender == 0"/>
								<text>女</text>
						    </label>
						</radio-group>
					</view>
				</view>
				<view class="row">
					<view class="nominal">
						电话号码
					</view>
					<view class="input">
						<input placeholder="请输入电话号码" type="text" v-model="utel" />
					</view>
				</view>
				<view class="row">
					<view class="nominal">
						个人签名
					</view>
					<view class="input">
						<textarea placeholder="输入个人签名" v-model="utext" auto-height="true" ></textarea>
					</view>
				</view>
				<view class="rowEnd"></view>
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				status: false,
				index: 0,
				uname:'',
				gender: 0,
				utel:'',
				utext:''
			}
		},
		methods: {
			cancel(){  //取消时触发
				this.status = false;
			},
			pri_affrim() { //确认时触发
				let data={
					"uname":this.uname,
					"gender":this.gender,
					"utel":this.utel,
					"utext":this.utext
				}
				if(!data.uname){
					uni.showToast({title:'请输入姓名',icon:'none'});
					return ;
				}
				if(!data.utel){
					uni.showToast({title:'请输入电话号码',icon:'none'});
					return ;
				}
				if(!data.utext){
					uni.showToast({title:'请输入个人签名',icon:'none'});
					return ;
				}
				uni.showLoading({
					title:'正在提交'
				})
				//实际应用中请提交ajax,模板定时器模拟提交效果
				setTimeout(()=>{
					uni.setStorage({
						key:'saveAddress',
						data:data,
						success() {
							uni.hideLoading();
							uni.navigateBack();
						}
					})
				},300)
				this.status = false;
			},
			show(uname,gender,utel,utext) { //父级调用这个方法显示弹出框
				this.status = true;
				this.uname = uname;
				this.gender = gender;
				this.utel = utel;
				this.utext = utext;
			}

		},
		onLoad() {
			console.log('u-select');
		}
	}
</script>
 
<style lang="less" scoped>
	.select_outer{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		transition: all .5s;
		.t{
			background-color: #f2f2f2;
			display: flex;
			padding: 12px 20px;
			font-size: 35upx;
			border-radius: 10px 10px 0 0;
			justify-content: space-between;
			text:nth-child(1){
				color: #FF0000;
			}
			text:nth-child(2){
				color: #3E8BC7;
			}
		}
		.m{
			background-color: #f2f2f2;
			// 设置高度，防止窜高
			height: 540upx;
			.save{
				view{
					display: flex;
				}
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 120upx;
				display: flex;
				justify-content: center;
				align-items: center;
				.btn{
					box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.4);
					width: 70%;
					height: 80upx;
					border-radius: 80upx;
					background-color: #3E8BC7;
					color: #fff;
					justify-content: center;
					align-items: center;
					.icon{
						height: 80upx;
						color: #fff;
						font-size: 30upx;
						justify-content: center;
						align-items: center;
					}
					font-size: 30upx;
				}
			}
			.content{
				display: flex;
				flex-wrap: wrap;
				view{
					display: flex;
				}
				.row{
					width: 94%;	
					margin: 0 3%;
					border-top: solid 1upx #eee;
					.nominal{
						width: 30%;
						height: 120upx;
						font-weight: 200;
						font-size: 30upx;
						align-items: center;
					}
					.input{
						width: 70%;
						padding: 20upx 0;
						align-items: center;
						font-size: 30upx;
						&.switch{
							justify-content: flex-end;
						}
						.textarea{
							margin: 20upx 0;
							min-height: 120upx;
						}
					}
				}
				.rowEnd{
					width: 94%;	
					margin: 0 3%;
					border-top: solid 1upx #eee;
					height: 20upx;
				}
			}
		}
	}
		
	.item {
		line-height: 50upx;
		text-align: center;
	}
	
	radio-group{
		radio{
			transform: scale(0.8);
		}
		text{
			margin-right: 50upx;
		}
	}
	/* radio 选中后的样式 */
	uni-radio .uni-radio-input.uni-radio-input-checked{
	    background-color: #3E8BC7 !important;
	    border-color: #3E8BC7 !important;
	    background-clip: content-box !important;
	    padding: 10upx !important;
	    box-sizing: border-box;
	}
</style>